<template>
  <div class="main">
    <div class="login">
      <div class="title">球鞋净界洗涤管理后台</div>
      <el-form>
        <el-form-item>
          <el-input :prefix-icon="User" v-model="form.username" placeholder="用户名"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            :prefix-icon="Lock"
            show-password
            password
            placeholder="密码"
            v-model="form.password"
          >
            ></el-input
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { postLogin } from '@/api'
import { useGlobalStore } from '@/stores'

const router = useRouter()
const store = useGlobalStore()
const form = reactive({
  username: '',
  password: ''
})

const login = async () => {
  const { data } = await postLogin(form)
  store.access_token = data.access_token
  router.push('/')
}
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/images/login_l.png) no-repeat, linear-gradient(to top, #fff, #d9e5ee);
  background-size: auto 100%;
  position: relative;
}

.main::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url(@/assets/images/login_r.png) no-repeat right bottom;
  background-size: auto 100%;
}

.login {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 674px;
  height: 465px;
  background-color: #fff;
  box-shadow: 7px 7px 24px 0px rgba(23, 55, 67, 0.24);
  border-radius: 10px;

  .title {
    width: 478px;
    font-size: 43px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 27px;
    border-bottom: 1px solid #ccccd1;
    margin: 55px auto 42px;

    background: linear-gradient(to bottom, #3ddbf7 0%, #267be4 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

:deep(.el-form) {
  .el-input {
    width: 504px;
    height: 50px;
    border-radius: 25px;
    margin: 0 auto 22px;

    .el-input__wrapper {
      // border-radius: 25px;
      font-size: 26px;
      font-size: 16px;
    }

    .el-icon {
      font-size: 24px;
    }
  }

  .el-button {
    width: 504px;
    height: 50px;
    color: #fff;
    font-size: 26px;
    background: linear-gradient(to left, #3ddbf7 0%, #267be4 100%);
    border-radius: 25px;
    border: 0;
    margin: 0 auto;
  }
}

:deep(input):-internal-autofill-selected {
  transition: background-color 5000s ease-in-out 10s !important;
  box-shadow: 0 0 0 1000px white inset !important;
  height: 100%;
}
</style>
